<template>
  <demoBlock title="基础用法" padding>
    <vcu-picker
      title="标题"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
  </demoBlock>
</template>


<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const columns = ["杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华"];

    const onConfirm = (value, index) => {
      console.info(`当前值: ${value}, 当前索引: ${index}`);
    };
    const onChange = (value, index) => {
      console.info(`当前值: ${value}, 当前索引: ${index}`);
    };
    const onCancel = () => console.info("取消");

    return {
      columns,
      onChange,
      onCancel,
      onConfirm,
    };
  },
});
</script>